<template>
	<view>
		<navNav :navobj="navobj" ></navNav>
		<view class="statusBox" v-if="serveStatus!=null">
			<uni-icons v-if="serveStatus.key == 5" class="icon" type="checkmarkempty"></uni-icons>
			<view class="title">{{serveStatus.name}}</view>
		</view>
		<!-- <view class="buttonBox">补充订单</view> -->
		<view class="mainBox">
			<view class="line" :style="{height:height+'px'}"></view>
			<view :style="{height:collectJudge?collectHeight+'px':'auto'}">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="header">
						<view class="status">{{item.stauts==='无'? '' : item.stauts}}</view>
						
							<view class="dot" v-if="(6-index)<=key||key==5"></view>
							<view class="noneDot" v-else></view>
						
						
						
						<view class="title">
							<view class="text" :class="(6-index)<=key||key==5?'':'none'">{{item.title}}</view>
							<view v-if="(6-index)<=key||key==5">
								<view v-if="item.title == '师傅验货'" style="position: relative; display: flex;align-items: center;">
									<view @click="chnagevisible()"  style="font-size: 22rpx; color: #fff;text-align: center;line-height: 50rpx;border-radius: 10rpx; width: 160rpx;height: 50rpx;background-color:#3662EC ;">勘察方案</view>
								  <view :style="{backgroundColor:detail.orderAddition?.status.key==1?'lawngreen' :'red'}" style="border-radius: 100%; position: absolute;top: -10rpx;right: -10rpx; font-size: 16rpx;color: #fff;text-align: center;height: 30rpx;width: 30rpx; line-height: 30rpx;">{{detail.orderAddition?.status.key==1?'√' :'!'}}</view>
								</view>
								
								<view @click="toExtra" v-if="item.extra == '前往评价'" class="extra">{{reviewsId? '已完成评价' : item.extra}}</view>
								<view @click="pay(detail.orderAddition)" v-if="item.extra == '支付'" class="extra">{{item.extra==='无'? '' : item.extra}}</view>
							</view>
						</view>
					</view>
				
					<view class="body"  v-if="serveStatus!=null">
						<view class="content" v-if="(6-index)<=key||key==5">
							{{item.content}}
						</view>
						<view class="imgList" >
							<view v-if="index==3">
								<image  class="img" mode="heightFix" v-for="(imgItem,index) in JSON.parse(detail.request.inspectedImage) " :key="index"
									:src="imgItem"></image>
							</view>
							<view v-if="index==2">
								<image  class="img" mode="heightFix" v-for="(imgItem,index) in JSON.parse(detail.request.checkedImage)" :key="index"
									:src="imgItem"></image>
							</view>
							
							
						</view>
					</view>
				</view>
			</view>
			<view class="collect" @click="collectJudge = !collectJudge">
				<view class="content">{{collectJudge?'展开':'收起'}}</view>
				<uni-icons v-if="!collectJudge" class="icon" type="top"></uni-icons>
				<uni-icons v-else class="icon" type="bottom"></uni-icons>
			</view>
		</view>
		<view class="userBox">
			<view style="display: flex;align-items: center;">
				<image class="img" src="../../static/img/home/exp.jpg"></image>
				<view class="nick">{{inspectorName?inspectorName:'等待师傅接单'}}</view>
			</view>
			
			<view>
			 <view @click="cancal(detail.orderNo)" class="button" v-if="status?.key ==1||status?.key ==3" >取消订单</view>
			</view>
			<view >
			 <view @click="toRefund()" class="button"  v-if="serveStatus!=null">申请售后</view>
			</view>
		</view>
		<view class="formation">
			<view class="labelBox">
				<view class="label">订单编号</view>
				<view class="value">{{detail.orderNo}}</view>
			</view>
			<view class="labelBox">
				<view class="label">商品服务</view>
				<view class="value">{{serveTitle?serveTitle:'暂无'}}</view>
			</view>
			<view class="labelBox">
				<view class="label">订单时间</view>
				<view class="value">{{detailobj.createTime}}</view>
			</view>

			<!-- <view class="labelBox">
				<view class="label">商品信息</view>
				<view class="value">{{detail.request.varietiesTitle}}</view>
			</view> -->
			<view class="labelBox">
				<view class="label">服务小区</view>
				<view v-if="userAddress.city" class="value" style=" color: black;width: 450rpx;">{{userAddress.city?.mergerName}}  {{userAddress.detail}}
					
				</view>
			</view>
			<view class="labelBox">
				<view class="label">地址详情</view>
				<view class="value" style="color: black;width: 450rpx;">{{userAddress.detail}}
					{{userAddress.userName}} {{userAddress.phone}}
				</view>
			</view>
     
		</view>
		
		<view class="buttonBox"  v-if="serveStatus!=null">
			<view class="button" v-if="serveStatus.key == 4" @click="confirm()">确认订单</view>
			
		</view>
		<view style="height: 200rpx;"></view>
		<view class="ht"  v-show="visible">
			<view @click="clickMask" v-show="visible" style=" position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 750rpx;background: rgba(0,0,0,0.5);z-index:999;"></view>
		  <view style="z-index: 999;width: 750rpx;height: 1300rpx;z-index:999;border-radius: 20rpx 20rpx 0 0;background-color: #fff; background-color: #fff;" :class="visible?'isactive':'none'" class="popup-content " >
				<view class="htbox" v-if="detail.orderAddition!=null&&kancharr.itemAttrValue">
					<view class="box">
						<view class="title">订单编号：<text class="text">{{detail.orderNo}}</text> </view>
					</view>
					<view class="box">
						<view class="title">创建日期：<text class="text">{{detailobj.createTime}}</text> </view>
					</view>
					<view  class="box">
						<view class="title">服务项目：<text class="text">{{serveTitle?serveTitle:''}}</text> </view>
					</view>
					<view  class="box">
						<view class="title">服务员工：<text class="text">{{inspectorName}}</text> </view>
					</view>
					<view  class="box">
						<view class="title">服务地址：<text class="text">{{userAddress.detail}}{{userAddress.userName}} {{userAddress.phone}}</text> </view>
					</view>
					<view  class="box">
						<view class="title">面积规格属性</view>
					</view>
					<view  class="box">
						<view style="display: flex;align-items: center;">
							<view class="titleinput">属性名</view>
							<input class="input" type="text" disabled="true" :value="kancharr.itemAttrValue[0]?.name" />
						</view>
						<view style="display: flex;align-items: center;">
							<view class="titleinput">属性值</view>
							<input class="input" type="text" disabled="true" :value="kancharr.itemAttrValue[0]?.suk" />
						</view>
					
					</view>
					<view  class="box">
						<view style="display: flex;align-items: center;">
							<view class="titleinput">单位</view>
							<input class="input" type="text" disabled="true" :value="kancharr.itemAttrValue[0]?.unit" />
						</view>
						<view style="display: flex;align-items: center;">
							<view class="titleinput">价格</view>
							<input class="input" type="text" disabled="true" :value="orderAddition?.payAmount" />
						</view>
					
					</view> 
					<view style="margin-top: 20rpx; display: flex;align-items: center;justify-content: space-between;">
						<view style="font-size: 26rpx;">合同照片</view>
					</view> 
					<view style="margin-top: 20rpx;display: flex;align-items: center;justify-content: space-between;">
						<view class="imgBox">
							<view @click="addImg1" class="imgUp">
								<uni-icons size="25" type="camera-filled"></uni-icons>
							</view>
							
							<image v-if="imgList.length>1" @click="previewimage(imgList[0])" class="img" mode="aspectFill"  :src="imgList[0]"></image>
						  <image v-else @click="previewimage(imgList)" class="img" mode="aspectFill"  :src="imgList"></image>
						</view>
						
					</view>
					<view style="margin-top: 20rpx; display: flex;align-items: center;justify-content: space-between;">
						<view style="font-size: 26rpx;">其他照片</view>
					</view>
					<view style="margin-top: 20rpx;display: flex;align-items: center;justify-content: space-between;">
						
						<view class="imgBox">
							<view @click="addImg2" class="imgUp">
								<uni-icons size="25" type="camera-filled"></uni-icons>
							</view>
							<image v-if="imgList.length>1" @click="previewimage(imgList[1])" class="img" mode="aspectFill" :src="imgList[1]"></image>
						</view>
					</view>
					<view  class="box2" v-if="detail.orderAddition?.status.key==0">
						<view class="title">金额：<text style="margin-left: 10rpx; color: red;font-size: 46rpx;">{{orderAddition?.payAmount}}</text>  </view>
						<view @click="pays" class="zhifu">去支付</view>
					</view>
					
					
					
					<view  class="box2" v-else style="align-items: center;">
						<view class="zhifu">已支付</view>
					</view>
					
				</view>
			</view>
		</view>
		
		

		
		

		<!-- <uni-popup ref="backWindow">
			<view class="backWindow">
				<view class="title">确定要取消吗？</view>
				<view class="content">取消就无法再恢复了</view>
				<view class="button" @click="cancal(detail.orderNo)">确定取消</view>
				<view class="tips" @click="backClose">返回</view>
			</view>
		</uni-popup> -->
		
		<!-- <uni-popup ref="SubmitWindow">
			<view class="backWindow">
				<view class="title">确定要确认订单吗？</view>
				<view class="content">确认就无法再返回了</view>
				<view class="button" @click="confirm()">确认</view>
				<view class="tips" @click="close">返回</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script setup>
	import popup from '@/components/popup/popup.vue';
	
	import {reactive, ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const {proxy} = getCurrentInstance()
	const visible=ref(false)
	const clickMask=()=>{
		visible.value = false
	}
	const chnagevisible=()=>{
		visible.value= !visible.value
		kanchafanganfun()
		console.log(	visible.value);
	}
	
	
	const navobj = reactive({
		  title:'订单详情',
			image:true
	})
	const id = ref('')
	const collectHeight = ref(0)
	const collectJudge = ref(false)
	const height = ref(10)
	const detail = ref({})
	const list = ref([])
	const actList = ref([])
	const key = ref('')
	const backEvent = ref(false)
	const reviewsId = ref(false)
	const describe = ref({})
	const imgList = ref([])
	const urlstring = ref('')
	const kancharr = ref({})
	const serveStatus = ref({})
	const inspectorName = ref('')
	const status = ref(null)
	const orderAddition = ref({})


	onLoad((e)=>{
		id.value = e.id
		getDetail()
		// readOrderNotice()
		
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 2]
		console.log(currentPage);
		
		
	}) 
	const serveTitle = ref('')
	const detailobj = reactive({
		createTime:'',
		status:''
	})
	const userAddress = ref({})
	const getDetail=async()=> {
		var data = {orderId: id.value}
		const result = await proxy.$api.orderDetail(data)
		if(result.code==200){
			detail.value = result.data
			detailobj.createTime = result.data.createTime
			serveTitle.value = result.data.request.serveTitle
			status.value = result.data.status
			userAddress.value = result.data.request.userAddress
			if(result.data.request.serveStatus!=null){
				serveStatus.value = result.data.request.serveStatus
				key.value = result.data.request.serveStatus.key
				inspectorName.value = result.data.request.inspectorName
				
			}else{
				serveStatus.value = null
				key.value = -1
				inspectorName.value =''
				
			}
			
			if(result.data.request.inspectedContract!=null){
				imgList.value =JSON.parse(result.data.request.inspectedContract) 
				
			}
			
			var a =	JSON.parse(detail.value.request.checkedImage) 
			
			list.value = [
				{
					stauts: '无',
					title: '评价服务',
					extra: '前往评价',
					content: '评价服务',
					img: [],
					act:false
				},
				{
					stauts: '无',
					title: '服务完成',
					extra: '无',
					content: '服务完成',
					img: [],
					act:false
				},
				{
					stauts: '无',
					title: '验收服务',
					extra: '无',
					content: `验收时间：${detail.value.request.checkedTime}`,
					img: ['../../static/img/home/exp.jpg', '../../static/img/home/exp.jpg'],
					act:false
				},
				{
					stauts: '无',
					title: '师傅验货',
					extra: '无',
					content: `验货时间：${detail.value.request.inspectedTime}`,
					img: ['../../static/img/home/exp.jpg', '../../static/img/home/exp.jpg'],
					act:false
				},
			
				{
					stauts: '无',
					title: '等待师傅上门服务',
					extra: '无',
					content: `上门签到时间：${detail.value.request.arrivedTime}`,
					img: [],
					act:false
				},
				{
					stauts: '无',
					title: '等待师傅确认上门时间',
					extra: '无',
					// content: `已预约：${this.detail.request.bookingStartTime}-${this.detail.request.bookingEndTime}`,
					content: `已预约：${detail.value.request.bookingStartTime}-${detail.value.request.bookingEndTime?.substring(11)}`,
					img: [],
					act:false
				},
				
				{
					stauts: '无',
					title: '监察师傅接单',
					extra: '无',
					content: `接单时间：${detail.value.request.revTime}`,
					img: [],
					act:false
				},						
			]
			
			if(serveStatus.value!=null){
				if(serveStatus.value.key == 51){
					list.value.slice(-7).forEach(item=>{
						item.act = true
					})
				}else{
					list.value.slice((serveStatus.value.key + 1)).forEach(item=>{
						item.act = true
						if(serveStatus.value.key==5){
							list.value[0].act = true
						}
					})
				}
			}
		}
	}
		

	
	
	const previewimage=(e)=>{
		var prearr = []
		prearr.push(e)
		uni.previewImage({
			urls: prearr,
			current: 0,
		});
	}
	const addImg11=async()=>{
		const result = await proxy.$api.upImg(data)
		if(result.code==200){
			imgList.value[0]=result.data.url
			shangchuankanchafanganfun()
		}
	}
	const addImg1=()=> {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				var data = {
					file: res.tempFilePaths[0]
				}
				addImg11()
			}
		})
	}
	const addImg22=async()=>{
		const result = await proxy.$api.upImg(data)
		if(result.code==200){
			imgList.value[1]=result.data.url
			shangchuankanchafanganfun()
		}
	}
	const addImg2=()=> {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				var data = {
					file: res.tempFilePaths[0]
				}
			   addImg22()
			
			}
		})
	}
	//上传勘察方案图片
	const shangchuankanchafanganfun=async()=>{
		var data = {id: detail.value.request.id,inspectedContract:JSON.stringify(imgList.value) }
		const result = await proxy.$api.shangchuankanchafangan(data)
		if(result.code==200){
			console.log('上传勘察方案',result);
		}
	}
	//勘察方案明细
	const kanchafanganfun=async()=>{
		var data = {orderNo: detail.value.orderNo}
		const result = await proxy.$api.kanchafangan(data)
		if(result.code==200){
			console.log('勘察方案',result);
			kancharr.value = result.data.orderItem[0]
			orderAddition.value = result.data.orderAddition
		}
	}
	const pays=async()=> {
		var data = {
			orderNo:detail.value.orderAddition.orderNo,
			payment: {
				payWay: 2,
			},
			paymentReq: {
				wayCode: 'WX_LITE'
			}
		}
		const result = await proxy.$api.createPay(data)
		if(result.code==200){
			var data = {
				...JSON.parse(result.data.payData)
			}
			uni.requestPayment({
				provider: 'wxpay',
				nonceStr: data.nonceStr,
				package: data.package,
				paySign: data.paySign,
				signType: data.signType,
				timeStamp: data.timeStamp,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
					getDetail()
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}
		
	}
	const changepingja=()=>{
		reviewsId.value = true
	}
	const htpop=()=>{
		kanchafanganfun()
		this.$refs.ht.open('bottom')
	}
	const toRefund=()=> {
		uni.navigateTo({
			url: `/pages-order/refund/refund?id=${detail.value.id}&orderNo=${detail.value.orderNo}`
		})
	}
	
	const openSubmit=()=> {
		this.$refs.SubmitWindow.open('center')
	}
	const close=()=> {
		this.$refs.SubmitWindow.close()
	}
	const openWindow=()=> {
		this.$refs.backWindow.open('center')
	}
	const backClose=()=> {
		this.$refs.backWindow.close()
	}
	// 确认订单
	const confirm=async()=>{
		var data = {
			orderNo:detail.value.orderNo
		}
		const result = await proxy.$api.confirmOrder(data)
		if(result.code==200){
			proxy.$showToast('确认成功')
			
			getDetail()
		}
	}
	
	const pay=(payment)=> {
		var data = {
			orderNo: payment.orderNo,
			payment: {
				payWay: 2,
			},
			paymentReq: {
				wayCode: 'WX_LITE'
			}
		}
		uni.navigateTo({
			url: `/pages-detail/pay/pay?data=${JSON.stringify(data)}&price=${payment.payAmount}&id=${payment.id}`
		})
	}
	const toExtra=()=> {
		var detail = detail.value
		uni.navigateTo({
			url: '/pages-detail/access/access?id='+detail.orderItem[0].item.id+'&orderid='+detail.orderNo+'&serverName='+inspectorName.value+'&serverId='+detail.request.inspectorId
		})
	}
	const cancal=async(no)=> {
		var data = {orderNo:no,reason:0}
		const result = await proxy.$api.cancalOrder(data)
		if(result.code==200){
			console.log('取消订单',res);
			proxy.$showToast('已取消')
		}
	}

</script>

<style lang="scss" scoped>
	.popup-content {
		width: 750rpx;
		position: fixed;
		bottom: -200rpx;
		left: 0;
		background: #fff;
		// transform: translate3d(0, 100%, 0);
		transition: all 0.3s;
		z-index:999;
	}
	.isactive{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		// transition: transform  2s;
		transition: all 0.8s;
		z-index:999;
	}
	.htbox{
		width: 750rpx;
		height: 1300rpx;z-index:999;
		border-radius: 20rpx 20rpx 0 0;background-color: #fff;padding: 40rpx 30rpx;
		box-sizing: border-box;
		.imgBox {
			
			display: flex;
			flex-wrap: wrap;
		
			.imgUp {
				background-color: $backGrey;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
				margin: 5px;
			}
		
			.img {
				width: 100rpx;
				height: 100rpx;
				margin: 5px;
			}
		}
		.box{
			display: flex;align-items: center;margin-bottom: 30rpx;justify-content: space-between;
			.input{
				border: 1rpx solid #ccc; background-color: #f5f5f5;border-radius: 10rpx;
				width: 200rpx;height: 50rpx;color: #999;font-size: 30rpx;padding-left: 20rpx;
				box-sizing: border-box;margin-left: 20rpx;
			}
			.titleinput{
				font-size: 30rpx;font-weight: 600;width: 100rpx;
				.text{
					font-size: 30rpx;font-weight: 500;color: #999;
				}
			}
			.title{
				font-size: 30rpx;font-weight: 600;
				.text{
					font-size: 30rpx;font-weight: 500;color: #999;margin-left: 20rpx;
				}
			}
		}
		.box2{
			margin: 0 auto; display: flex;align-items: center;position: absolute;bottom: 20rpx;left: 30rpx;
			width: 690rpx;height: 120rpx;justify-content: space-between;border-top: 14rpx solid #ccc;
			.title{
				color: #333;font-size: 40rpx;
			}
			.zhifu{
				text-align: center;line-height: 70rpx;height: 70rpx;width: 150rpx;border-radius: 10rpx;
				font-size: 26rpx;color: #fff;background: linear-gradient( 150deg, #4E8CFF 0%, #59DEF9 100%);
			}
		}
	}
	.buttonBox {
		position: fixed;
		width:750rpx;
		height:150rpx; 
		bottom: 0px;
		z-index: 90;
		padding-top:20rpx;
		display: flex;justify-content: center;

		.button {
			padding: 10px;
			background: $linerBlue;
			color: white;
			flex: auto;
			text-align: center;
			border-radius: 10px;
		}

		.warn {
			background: $red !important;
		}
	}

	.formation {
		padding: 0px 20px;
		padding-bottom: 30px;

		.labelBox {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin: 20px 0px;
			font-size: 14px;

			.label {
				width: 64px;
				color: $grey;
				font-weight: bold;
			}

			.value {
				width: calc(100% - 74px);
				color: $grey;

				text-align: right;
			}
		}
	}

	.userBox {
		padding: 10px 20px;
		display: flex;
		align-items: center;
		border-bottom: 5px solid $backGrey;
		border-top: 5px solid $backGrey;
		justify-content: space-between;

		.img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

		.nick {
			font-weight: bold;
			margin-left: 10px;
		}

		.button {
			font-size: 14px;
			padding: 5px 15px;
			color: $blue;
			border-radius: 20px;
			border: 2px solid $blue;
		}
	}

	.mainBox {
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;

		.line {
			position: absolute;
			left: 64px;
			width: 1px;
			background-color: $shollowGrey;
			top: 10px;
		}

		.collect {
		  background-color: $backGrey;
			position: relative;
			z-index: +1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 0px;

			.content {
				color: $grey;
			}
		}

		.item {
			margin-bottom: 20px;
			position: relative;
			z-index: +1;

			.body {
				padding: 0px 20px;
				margin-left: 62px;
				margin-top: 5px;

				.content {
					font-size: 14px;
					color: $grey;
				}

				.imgList {
					margin-top: 10px;

					.img {
						height: 50px;
						margin-right: 10px;
					}
				}
			}

			.header {
				padding: 0px 20px;
				display: flex;
				align-items: center;

				.dot {
					margin: 0px 10px;
					width: 14px;
					height: 14px;
					background-color: rgba(54, 98, 236, 0.50);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.dot::after {
					content: '';
					border-radius: 50%;
					width: 8px;
					height: 8px;
					background-color: #4E8CFF;
				}
				
				
				.noneDot {
					margin: 0px 10px;
					width: 14px;
					height: 14px;
					background-color: rgba(212, 214, 236, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.noneDot::after {
					content: '';
					border-radius: 50%;
					width: 8px;
					height: 8px;
					background-color: #aeb4ec;
				}

				.status {
					font-weight: bold;
					font-size: 14px;
					width: 28px;
				}

				.none{
					color: $shollowGrey !important;
				}

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: auto;

					.text {
						font-weight: bold;
					}

					.extra {
						font-weight: bold;
						color: $blue;
						font-size: 15px;
					}
				}
			}
		}
	}

	::v-deep .statusBox {
		display: flex;
		padding: 20px;
		align-items: center;
		font-weight: bold;
		color: #4E8CFF;



		.icon {
			color: $blue !important;

			text {
				color: $blue !important;
			}

			font-size: 18px !important;
			margin-right: 5px;
		}
	}

	page {
		background-color: #ffffff !important;
	}

	.backWindow {
		background-color: white;
		border-radius: 5px;
		padding: 20px;

		.title {
			font-weight: bold;
			text-align: center;
		}

		.content {
			font-size: 14px;
			color: $grey;
			margin: 10px 20px;
		}

		.button {
			font-size: 14px;
			background-color: #4E8CFF;
			color: white;
			text-align: center;
			padding: 6px 0px;
			border-radius: 20px;
		}

		.tips {
			font-size: 14px;
			background: rgba(172, 212, 255, 0.2);
			color: #4E8CFF;
			text-align: center;
			padding: 6px 0px;
			border-radius: 20px;
			margin-top: 10px;
		}
	}
</style>